<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 加载状态 -->
    <div v-if="loading" class="flex justify-center items-center min-h-screen">
      <div class="text-center">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="mt-2 text-gray-500">加载中...</p>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="flex justify-center items-center min-h-screen">
      <div class="text-center">
        <div class="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
          <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">加载失败</h3>
        <p class="text-gray-500 mb-4">{{ error }}</p>
        <button 
          @click="loadProject"
          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          重试
        </button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div v-else-if="project" class="container mx-auto px-4 py-8">
      <!-- 返回按钮 -->
      <div class="mb-6">
        <button 
          @click="$router.go(-1)"
          class="flex items-center text-gray-600 hover:text-gray-800 transition-colors"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
          </svg>
          返回
        </button>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 左侧：项目信息 -->
        <div class="lg:col-span-2">
          <div class="bg-white rounded-lg shadow-sm p-8">
            <!-- 项目封面 -->
            <div class="mb-8">
              <div class="relative h-64 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg overflow-hidden">
                <img
                  v-if="project.cover_image"
                  :src="project.cover_image"
                  :alt="project.title"
                  class="w-full h-full object-cover"
                >
                <div v-else class="w-full h-full flex items-center justify-center">
                  <div class="text-white text-center">
                    <svg class="w-16 h-16 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                    <span class="text-sm font-medium">项目封面</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 项目基本信息 -->
            <div class="mb-8">
              <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ project.title }}</h1>
              
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
                  {{ getTypeName(project.type) }}
                </span>
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
                  {{ getDifficultyName(project.difficulty) }}
                </span>
                <span
                  :class="[
                    'px-3 py-1 rounded-full text-sm font-medium',
                    project.status === 'approved' ? 'bg-green-100 text-green-800' :
                    project.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                    'bg-red-100 text-red-800'
                  ]"
                >
                  {{ getStatusName(project.status) }}
                </span>
              </div>

              <p class="text-gray-600 text-lg leading-relaxed">{{ project.description }}</p>
            </div>

            <!-- 技术栈 -->
            <div v-if="project.tech_stack && project.tech_stack.length > 0" class="mb-8">
              <h2 class="text-xl font-semibold text-gray-900 mb-4">技术栈</h2>
              <div class="flex flex-wrap gap-2">
                <span
                  v-for="tech in project.tech_stack"
                  :key="tech"
                  class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"
                >
                  {{ tech }}
                </span>
              </div>
            </div>

            <!-- 项目链接 -->
            <div class="mb-8">
              <h2 class="text-xl font-semibold text-gray-900 mb-4">项目链接</h2>
              <div class="flex flex-wrap gap-4">
                <a
                  v-if="project.github_url"
                  :href="project.github_url"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex items-center px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
                >
                  <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                  </svg>
                  GitHub
                </a>
                <a
                  v-if="project.demo_url"
                  :href="project.demo_url"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                  </svg>
                  在线演示
                </a>
              </div>
            </div>

            <!-- 项目统计 -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div class="text-center p-4 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-gray-900">{{ project.like_count }}</div>
                <div class="text-sm text-gray-500">点赞数</div>
              </div>
              <div class="text-center p-4 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-gray-900">{{ project.view_count }}</div>
                <div class="text-sm text-gray-500">浏览数</div>
              </div>
              <div class="text-center p-4 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-gray-900">{{ project.fork_count || 0 }}</div>
                <div class="text-sm text-gray-500">Fork数</div>
              </div>
              <div class="text-center p-4 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-gray-900">{{ project.star_count || 0 }}</div>
                <div class="text-sm text-gray-500">Star数</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：操作面板 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-sm p-6 sticky top-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">操作</h3>
            
            <!-- 点赞按钮 -->
            <button
              @click="toggleLike"
              :disabled="liking"
              class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mb-4"
            >
              {{ liking ? '处理中...' : (project.is_liked ? '取消点赞' : '点赞') }}
            </button>

            <!-- 分享按钮 -->
            <button
              @click="shareProject"
              class="w-full bg-gray-100 text-gray-700 py-3 px-4 rounded-lg hover:bg-gray-200 transition-colors mb-4"
            >
              分享项目
            </button>

            <!-- 作者信息 -->
            <div class="border-t border-gray-200 pt-4">
              <h4 class="text-sm font-medium text-gray-700 mb-3">作者</h4>
              <div class="flex items-center">
                <img
                  :src="project.author?.avatar_url || '/static/avatar/default.jpg'"
                  :alt="project.author?.username"
                  class="w-10 h-10 rounded-full mr-3"
                >
                <div>
                  <p class="font-medium text-gray-900">{{ project.author?.username || '未知用户' }}</p>
                  <p class="text-sm text-gray-500">{{ project.author?.title || '开发者' }}</p>
                </div>
              </div>
            </div>

            <!-- 创建时间 -->
            <div class="border-t border-gray-200 pt-4 mt-4">
              <h4 class="text-sm font-medium text-gray-700 mb-2">项目信息</h4>
              <div class="text-sm text-gray-500 space-y-1">
                <p>创建时间：{{ formatDate(project.created_at) }}</p>
                <p>更新时间：{{ formatDate(project.updated_at) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { projectApi } from '@/api/project'

const route = useRoute()

// 响应式数据
const project = ref<any>(null)
const loading = ref(false)
const error = ref('')
const liking = ref(false)

// 方法
const loadProject = async () => {
  try {
    loading.value = true
    error.value = ''
    
    const projectId = Number(route.params.id)
    const response = await projectApi.getProjectDetail(projectId)
    project.value = response.data
  } catch (err: any) {
    error.value = err.message || '加载项目失败'
    console.error('加载项目失败:', err)
  } finally {
    loading.value = false
  }
}

const toggleLike = async () => {
  if (!project.value) return
  
  try {
    liking.value = true
    await projectApi.likeProject(project.value.id)
    
    // 更新本地状态
    project.value.is_liked = !project.value.is_liked
    project.value.like_count += project.value.is_liked ? 1 : -1
  } catch (err: any) {
    console.error('点赞失败:', err)
    alert(err.message || '操作失败')
  } finally {
    liking.value = false
  }
}

const shareProject = () => {
  if (navigator.share) {
    navigator.share({
      title: project.value.title,
      text: project.value.description,
      url: window.location.href
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href)
    alert('链接已复制到剪贴板')
  }
}

const getTypeName = (type: string): string => {
  const typeMap: { [key: string]: string } = {
    web: 'Web应用',
    mobile: '移动应用',
    desktop: '桌面应用',
    library: '开源库',
    tool: '开发工具',
    game: '游戏',
    ai: 'AI项目',
    blockchain: '区块链'
  }
  return typeMap[type] || type
}

const getDifficultyName = (difficulty: string): string => {
  const difficultyMap: { [key: string]: string } = {
    beginner: '入门',
    intermediate: '中级',
    advanced: '高级'
  }
  return difficultyMap[difficulty] || difficulty
}

const getStatusName = (status: string): string => {
  const statusMap: { [key: string]: string } = {
    approved: '已发布',
    pending: '审核中',
    rejected: '已拒绝',
    draft: '草稿'
  }
  return statusMap[status] || status
}

const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

onMounted(() => {
  loadProject()
})
</script>